import React from 'react';
import PropTypes from 'prop-types';
import VoteCountIcon from '../rs/vote_count.png';
import {Card, WhiteSpace} from "antd-mobile";
require('./VoteCard.less');

export default class VoteCard extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    let status;
    switch(this.props.status) {
      case '草稿':
        status = <span className="vc_status_draft">{this.props.status}</span>;
        break;
      case '进行中':
        status = <span className="vc_status_start">{this.props.status}</span>;
        break;
      case '已结束':
        status = <span className="vc_status_end">{this.props.status}</span>;
        break;
      default:
        status = null;
        break;
    }

    return (
      <div>
        <Card>
          <Card.Header
            title={
              <div className="vc_title_container">
                <p className="vc_title">{this.props.title}</p>
                <div className="vc_status">
                  {status}
                </div>
                <div className="vc_vote_count_container">
                  <div className="vc_vote_count_img">
                    <img src={VoteCountIcon} />
                  </div>
                  <div className="vc_vote_count_text">
                    <p>{this.props.voteCount}人已投</p>
                  </div>
                </div>
              </div>
            }
          />
          <Card.Body>
            <div className="vc_description">{this.props.description}</div>
          </Card.Body>
          <Card.Footer
            content={
              <div className="vc_creator_container">
                <div className="vc_creator_img">
                  <img src={this.props.creatorHeadImgUrl} />
                </div>
                <div className="vc_creator_name">
                  <p>发布人：{this.props.creatorName}</p>
                </div>
              </div>
            }
            extra={
              <div className="vc_end_time">
                <p>{this.props.endTime}截止</p>
              </div>
            }/>
        </Card>
        <div className="vc_white_space">
          <WhiteSpace size="md" />
        </div>
      </div>
    );
  }
}

VoteCard.propTypes = {
  title: PropTypes.string.isRequired,
  status: PropTypes.string.isRequired,
  voteCount: PropTypes.number.isRequired,
  description: PropTypes.number.isRequired,
  creatorHeadImgUrl: PropTypes.number.isRequired,
  creatorName: PropTypes.number.isRequired,
  endTime: PropTypes.number.isRequired
};
